Pie chart explode (onmousemove)

This Pie chart is similar to an old Pie chart demo. But instead of using the onclick event this uses the onmousemove event.

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.common.effects.js"></script>
<script src="RGraph.pie.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="450" height="300">
    [No canvas support]
</canvas>

This is the code that generates the chart:

<script>
    window.onload = function ()
    {
        // Create the Pie chart
        pie = new RGraph.Pie({
            id: 'cvs',
            data: [4,6,3,5,2,5,8],
            options: {
                labels: ['Monday', 'Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
                labelsSticksList: true,
                textColor: '#ccc',
                exploded: 5,
                radius: 100,
                linewidth: 1,
                shadowBlur: 10,
                shadowColor: '#ccc',
                textAccessible: true
            }
        }).on('mousemove', function (e, shape)
        {
            var idx = shape['index'];

            if (typeof(pie.Get('exploded')) == 'number' || pie.Get('exploded')[idx] <= 5) {
                pie.set('exploded', 5)
                pie.explodeSegment(idx, 25);
            }
            
            e.target.style.cursor = 'pointer';
            
            e.stopPropagation();
        }).draw()




        // Add the window click listener that resets the Pie chart
        window.onclick = function (e)
        {
            pie.set('exploded', 5);
            RGraph.redraw();
        }
    };
</script>